<template>
  <div class="table-data">
    <el-form
      ref="ruleForm"
      :model="form"
      label-width="180px"
      size="small"
      class="form-box"
    >
        <el-form-item label="抬头" >
            <el-input v-model="form.invoice_title"></el-input>
        </el-form-item>
        <el-form-item label="税号" >
            <el-input v-model="form.invoice_tax"></el-input>
        </el-form-item>
        <el-form-item label="地址">
            <el-input v-model="form.invoice_address"></el-input>
        </el-form-item>
        <el-form-item label="电话">
            <el-input v-model="form.mobile"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
            <el-input v-model="form.email"></el-input>
        </el-form-item>
        <el-form-item label="开户银行">
            <el-input v-model="form.bank_name"></el-input>
        </el-form-item>
        <el-form-item label="银行账号">
            <el-input v-model="form.bank_number"></el-input>
        </el-form-item>
    </el-form>
    <div class="dialog-footer">
      <el-button @click="cancel" size="small">取消</el-button>
      <el-button @click="submitFormAdd('ruleForm')" type="primary" size="small">确定</el-button>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Provide } from "vue-property-decorator";
import channelApi from "@/api/channel";
@Component({})
export default class channelAddDialog extends Vue {
  // 属性或参数中使用 ！：表示强制解析（告诉typescript编译器，这里一定有值），常用于vue-decorator中的@Prop
  check:boolean = true//防重复提交
  form:any = {
      invoice_title:'',
      invoice_tax:'',
      invoice_address:'',
      mobile:'',
      email:'',
      bank_name:'',
      bank_number:'',
      type:'',
      mch_id:'',
      shop_id:''
  };
  created(){
      let data = this.$route.query
      channelApi.InvoiceDetails(data)
      .then((res:any)=>{
        if(res.data.code==200) {
          if(res.data.data!==null) {
            this.form = res.data.data
          }else {
            this.form = {}
          }
        }
      })

      
  }
    // 提交
  submitFormAdd(formName: any) {
    (this.$refs[formName] as any).validate((valid: boolean) => {
      if (valid) {
        let data = this.$route.query
        this.form.type = data.type
        if(data.type=="shop") {
          this.form.shop_id = data.id
        }else {
          this.form.mch_id = data.id
        }
        if(this.check) {
          this.check=false 
          channelApi.InvoiceModification(this.form)
          .then((res: any) => {
            if(res.data.code==200){
              this.$message({
                message: '操作成功',
                type: "success"
              });
              this.$router.go(-1)
              setTimeout(() => {
                this.check = true
              }, 1500);
            }else{
              this.$message({
                message: res.data.msg,
                type: "error"
              });
              setTimeout(() => {
                this.check = true
              }, 1500);
            }
            
          });
        }
         
      }
    });
  }
  cancel(){
    this.$router.go(-1)
  }
}
</script>

<style lang="scss" scoped>
.dialog-footer{
  padding-left: 150px
}
.form-box {
  .el-input,
  .el-select {
    width: 220px !important;
  }
  .title{
    line-height: 60px;
    font-weight: bold;
    font-size: 16px;
  }
}

</style>